<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>生成表格</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /* 设置表格边框样式 */
    #myTable {
      border-collapse: collapse;
      width: 100%;
      color: white;
      border: 1px solid #ddd;
    }

    /* 设置表格头部单元格样式 */
    #myTable th {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    /* 设置表格数据行单元格样式 */
    #myTable td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>工作面名称</th>
        <th>厚度</th>
        <th>探测时间</th>
        <th>更新时间</th>
        <th>构造类型</th>
        <th>构造边界多边形控制点数</th>
        <th>百分比度量探测可信度</th>
        <th>异常等级</th>
      </tr>
    </thead>
    <tbody>
      <!-- 这里将会插入生成的数据行 -->
    </tbody>
  </table>

  <script>
    $(document).ready(function() {
      var table = $('#myTable tbody');
      $.ajax({
        url: '/getData', // 后端数据接口的URL
        method: 'GET',
        dataType: 'json',
        success: function(data) {
          // 数据获取成功后，动态生成列表
          data.forEach(function(item) {
            var listItem = $('<li>').text(item);
            list.append(listItem);
          });
        },
        error: function() {
          console.error('获取数据失败');
        }
      })
      var dataFromBackend = [   // 发起 AJAX 请求获取数据
        { column1: "数据1-1", column2: "数据1-2", column3: "数据1-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        { column1: "数据2-1", column2: "数据2-2", column3: "数据2-3" },
        // 更多数据行...
      ];

      dataFromBackend.forEach(function(item) {
        var row = $('<tr>');
        row.append($('<td>').text(item.column1));
        row.append($('<td>').text(item.column2));
        row.append($('<td>').text(item.column3));
        table.append(row);
      });
    });
  </script>
</body>
</html>
